<template>
    <div :class="['css-lab', { 'theme-custom': isCustom }]">
        <h1>Element Plus 组件 CSS 专区</h1>
        <div class="controls">
            <my-el-switch v-model="isCustom" active-text="自定义主题" inactive-text="默认主题" />
        </div>

        <my-el-card header="按钮样式">
            <div class="demo-row">
                <my-el-button type="primary" class="btn-gradient">Primary 渐变</my-el-button>
                <my-el-button type="success" class="btn-soft">Success 柔和</my-el-button>
                <my-el-button type="warning" round class="btn-shadow">圆角阴影</my-el-button>
                <my-el-button type="danger" plain class="btn-outline">描边</my-el-button>
            </div>
        </my-el-card>

        <my-el-card header="输入与选择">
            <div class="demo-row">
                <my-el-input v-model="input" placeholder="自定义输入边框/焦点" class="input-lg" />
                <my-el-select v-model="select" placeholder="下拉定制" style="width: 200px;">
                    <el-option label="选项1" value="1" />
                    <el-option label="选项2" value="2" />
                </my-el-select>
            </div>
        </my-el-card>

        <my-el-card header="表格定制">
            <my-el-table :data="tableData" border stripe class="table-fancy">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="email" label="邮箱" />
            </my-el-table>
        </my-el-card>

        <my-el-card header="标签与开关">
            <div class="demo-row">
                <my-el-tag type="success" class="tag-pill">Pill Tag</my-el-tag>
                <my-el-tag type="warning" class="tag-soft">Soft Tag</my-el-tag>
                <my-el-switch v-model="on" />
            </div>
        </my-el-card>
    </div>
</template>

<script>
export default {
    name: 'ElementCss',
    data() {
        return {
            isCustom: true,
            input: '',
            select: '',
            on: false,
            tableData: [
                { id: 1, name: '张三', email: 'a@b.com' },
                { id: 2, name: '李四', email: 'b@b.com' },
                { id: 3, name: '王五', email: 'c@b.com' }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
.css-lab {
    padding: 20px;
}

.controls {
    margin-bottom: 12px;
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* 主题变量定制：仅在启用 .theme-custom 时生效 */
.theme-custom {
    --el-color-primary: #6a5af9;
    --el-color-success: #16a085;
    --el-border-radius-base: 10px;
    --el-border-color: #e6e6f0;
}

/* 按钮定制 */
:deep(.el-button.btn-gradient) {
    background: linear-gradient(135deg, #6a5af9 0%, #22d3ee 100%);
    border: none;
    color: #fff;
}

:deep(.el-button.btn-shadow) {
    box-shadow: 0 8px 20px rgba(106, 90, 249, 0.25);
}

:deep(.el-button.btn-outline.is-plain) {
    border: 1px solid var(--el-color-danger);
    color: var(--el-color-danger);
    background: transparent;
}

/* 输入定制 */
:deep(.input-lg .el-input__wrapper) {
    padding: 8px 14px;
}

:deep(.el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 2px rgba(106, 90, 249, 0.25) inset;
}

/* 表格定制 */
:deep(.table-fancy .el-table__header th) {
    background: #f6f7ff;
    color: #333;
    font-weight: 600;
}

:deep(.table-fancy .el-table__row:hover > td) {
    background: #fafbff !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #fcfcff;
}

/* 标签定制 */
:deep(.tag-pill.el-tag) {
    border-radius: 999px;
    padding: 6px 12px;
}

:deep(.tag-soft.el-tag--warning) {
    background: #fff7e6;
    border-color: #ffe1a3;
    color: #b26b00;
}
</style> 